import { type Directive } from 'vue'
import defaultImg from '@/assets/images/200.png'

export const lazyload: Directive = {
  /** 绑定指令的元素的父组件，及他自己的所有子节点都挂载完成后调用 */
  mounted(el, binding) {
    el.src = defaultImg
    const intersectionObserver = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          intersectionObserver.unobserve(el)
          el.src = binding.value
        }
      },
      {
        threshold: 0.2
      }
    )

    intersectionObserver.observe(el)
  }
}
